<template>
    <div class="goods">
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item>首页</el-breadcrumb-item>
            <el-breadcrumb-item>全部商品</el-breadcrumb-item>
            <el-breadcrumb-item>分类</el-breadcrumb-item>
        </el-breadcrumb>
        <ul class="nav">
            <div style="width: 100px; text-align: center; line-height: 40px; font-size: 16px;">分类</div>
            <li v-for="(item, index) in list" :key="index" :class="{ active: active == index }" @click="tabli(index)">
                {{ item.title }}</li>
        </ul>
        <div class="right">
            <ul>
                <li v-for="(item, index) in list1" :key="index" @click="detailsPage(item)">
                    <img :src="'http://101.132.181.9:3000/' + item.product_picture" class="img">
                    <div class="div">
                        <p>{{ item.product_name }}</p>
                        <p class="text" style="font-size: 14px; color: #b0b0b0;">{{ item.product_title }}
                        </p>
                        <p><span style="font-size: 16px; margin-right: 5px; color: #ff6700;">{{
                                item.product_selling_price
                        }}</span><s style="font-size: 16px; color: #b0b0b0;">{{ item.product_price }}</s></p>
                    </div>
                </li>
            </ul>
        </div>
        <el-pagination @current-change="currentChange" small layout="prev, pager, next" :total="total"
            :page-size="page.pageSize" :current-page="page.currentPage"></el-pagination>
    </div>
</template>
<script>
import { getseach, centerlist, alllist } from "@/api/api.js"
export default {
    data() {
        return {
            active: 0,
            list: [
                { title: '全部' },
                { title: '手机' },
                { title: '电视机' },
                { title: '空调' },
                { title: '洗衣机' },
                { title: '保护套' },
                { title: '保护膜' },
                { title: '充电器' },
                { title: '充电宝' },
            ],
            list1: [],
            page: {
                currentPage: 1,
                pageSize: 15
            },
            total: 0,
            inputValue:this.$store.state.inputvalue
        }
    },
    methods: {
        tabli(i) {
            this.active = i
            if (i == 0) {
                alllist(this.page).then(res => {
                    this.list1 = res.Product
                    this.total = res.total
                })
            }
            if (i == 1) {
                centerlist({ categoryName: '手机' }).then(res => {
                    this.list1 = res.Product
                })
            } else if (i == 2) {
                centerlist({ categoryName: '电视机' }).then(res => {
                    this.list1 = res.Product
                })
            } else if (i == 3) {
                centerlist({ categoryName: '空调' }).then(res => {
                    this.list1 = res.Product
                })
            } else if (i == 4) {
                centerlist({ categoryName: '洗衣机' }).then(res => {
                    this.list1 = res.Product
                })
            } else if (i == 5) {
                centerlist({ categoryName: '保护套' }).then(res => {
                    this.list1 = res.Product
                    console.log(res.Product);
                })
            } else if (i == 6) {
                centerlist({ categoryName: '保护膜' }).then(res => {
                    this.list1 = res.Product
                })
            } else if (i == 7) {
                centerlist({ categoryName: '充电器' }).then(res => {
                    this.list1 = res.Product
                    console.log(res.Product);
                })
            } else if (i == 8) {
                centerlist({ categoryName: '充电宝' }).then(res => {
                    this.list1 = res.Product
                })
            }
        },
        detailsPage(item) {
            this.$router.push('/detailsPage')
            this.$store.commit('detailsPage', item.product_id)
        },
        currentChange(val) {
            this.page.currentPage = val
            alllist(this.page).then(res => {
                this.list1 = res.Product
                this.total = res.total
            })
        },
        async seach() {
            try {
                let obj = { currentPage: this.page.currentPage, pageSize: this.page.pageSize, search:this.inputValue}
                const {Product}= await getseach(obj)
                this.list1=Product
                console.log(Product);
            } catch (error) {
            }
        }
    },
    computed: {},
    components: {},
    created() {
        this.tabli(0)
        this.seach()
        
    },
}
</script>
<style lang="scss" scoped>
.goods {
    width: 100%;
    background: #f5f5f5;

    .nav {
        width: 600px;
        height: 40px;
        margin-top: 20px;
        display: flex;

        li {
            width: 100px;
            text-align: center;
            line-height: 40px;
            border: 1px solid #ccc;
        }

        li:hover {
            cursor: pointer;
        }

        .active {
            color: #409eff;
        }
    }

    .right {
        flex: 7.9;

        ul {
            display: flex;
            flex-wrap: wrap;

            .img {
                width: 70%;
                height: 60%;
                display: block;
                margin: 0 auto;
            }

            li {
                width: 228px;
                height: 290px;
                margin-left: 20px;
                margin-top: 10px;
                background: #fff;

                .text {
                    margin: 15px 0;
                }

                p {
                    text-align: center;
                    font-size: 16px;
                }

                .div {
                    margin-top: 20px;
                }
            }

            .liu1 {
                text-align: center;
                line-height: 290px;
            }

            .liu:hover {
                color: #ff6700;
                cursor: pointer;
            }

            li:hover {
                box-shadow: 5px 5px 20px #c0bcbc;
                transition: .4s;
            }
        }
    }
}
</style>